<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: red;
        }

        * {
            color: chocolate;
        }

        .test{
            color: yellow !important;
        }

        #my{
            color: #ff00e6;
        }
    </style>
</head>
<body>
<!--
CSS 三大特性:
1. 层叠性
当多个 样式作用于同一个标签时,样式发生了冲突
总是执行后面的样式,而与这些样式调用的顺序无关
可以认为 后面的样式叠在了 前面的样式上
2. 继承性
内部的标签可以继承外部标签的样式,
但是 只能继承 文字相关的样式,例如文字颜色,文字大小,粗细..
特殊的: h标签无法继承文字大小
a标签 无法继承文字颜色
3. 优先级
当多个选择器 作用在同一个标签上时,然后又设置了相同的属性,
如何层叠就是由优先级来确定的
1. 如果是间接选中(继承来的) 那么谁离的近 就使用谁的
2. 如果是直接选中,并且选择器类型一样,那么谁写在后面,就听谁的
3. 如果是直接选中,并且 类型还不一样,那么就会按照选择器的
优先级来确定

选择器的优先级:
important>行内样式>id选择器>类选择器>
标签选择器>通配符选择器>继承选择器

如果我们想提个某个样式它的优先级
可以使用!important
1. 它只能修饰属性
2. 需要写在 ; 前面
3. 通配符选择器 也可以使用



-->
<p>百日依山尽,<i>黄河入海流</i> <a href="#">asdfdf</a></p>
<hr>

<p>横眉冷对千夫指,<span class="test" id="my" style="color: darkcyan">俯首甘为孺子牛</span></p>
</body>
</html>